<!--
 * @FilePath: CommonAside.vue
 * @Author: 杜芬
 * @Date: 2025-04-21 16:41:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-04-22 11:15:20
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <el-aside class="el-aside" style="width: 280px">
    
    <el-menu
        class="el-menu"
        background-color="#545c64"
         text-color="#fff"
         style="height:100%"
      >
      <h2 class="h2">通用后台管理系统</h2>
        <!-- <el-sub-menu  v-for="item in noChildren" :key="item.path" :index="item.path">
          <template #title>
            <component class="icon" :is="item.icon"></component>
            <span>{{ item.label }}</span>
          </template>
       
        </el-sub-menu> -->
        <el-sub-menu 
           v-for="item in hasChildren"
          :key="item.path" 
          :index="item.path"
          >
          <template #title>
            <component class="icon" :is="item.icon"></component>
            <span>{{ item.label }}</span>
          </template>
                <el-menu-item-group  
                v-for="item in hasChildren"
                :key="item.path" 
                :index="item.path">
                <el-menu-item  
                      v-for="(subItem) in item.children"
                      :key="subItem.path" 
                      :index="subItem.path">
                      <component class="icon" :is="subItem.icon"></component>
                      <span>{{ subItem.label }}</span>
                    </el-menu-item>
              </el-menu-item-group>
          </el-sub-menu>
      
       
      </el-menu>
  </el-aside>
</template>

<script setup>
import {ref,computed} from 'vue'

const list = ref([
  {
    path: '/home',
    name: 'home',
    label: '首页',
    icon: 'House',
    url: 'Home/Home'
  },
  {
    path: '/about',
    name: 'about',
    label: '关于',
    icon: 'InfoFilled',
    url: 'About/About',
    children: [
      {
        path: '/Aboutpage1',
        name: 'Aboutpage1',
        label: 'About页面1',
        icon: 'InfoFilled',
        url: 'Aboutpage1'
      },
      {
        path: '/Aboutpage2',
        name: 'Aboutpage2',
        label: 'About页面2',
        icon: 'InfoFilled',
        url: 'Aboutpage2'
      }
    ]
  },
  {
    path: '/user',
    name: 'user',
    label: '用户',
    icon: 'InfoFilled',
    url: 'user'
  },
  {
    path: '/other',
    name: 'other',
    label: '其他',
    icon: 'InfoFilled',
    url: 'other',
    children: [
      {
        path: '/page1',
        name: 'page1',
        label: '页面1',
        icon: 'InfoFilled',
        url: 'page1'
      },
      {
        path: '/page2',
        name: 'page2',
        label: '页面2',
        icon: 'InfoFilled',
        url: 'page2'
      }
    ]
  },

])


const noChildren= computed(()=>list.value.filter(item=>!item.children))
const hasChildren= computed(()=>list.value.filter(item=>item.children))
</script>

<style lang="less" scoped>
.el-aside, .el-menu {
  height: 100%;
}
.el-aside {
  height: calc(100vh - 14px);
  overflow: hidden;
  background-color:"#545c64";
  .h2 {
    padding-top: 20px;
    text-align: center;
    color: #fff;
  }
}
.icon {
  width: 20px;
  height: 20px;
  margin-right: 10px

}
</style>